import React, { Component } from 'react'
// import { SettingAlert } from '../../components'
import { Modal, Button, Form, Tabs  } from 'antd';
import { ModalForm } from '../../components'
const WrappedAdvancedSearchForm = Form.create()(ModalForm);
const TabPane = Tabs.TabPane;




export default class SettingPageTab extends Component {
    constructor(props) {
           super(props);
           this.state = {
               loading: false,
               visible: false,
           };
       }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = () => {
      this.setState({ visible: false })
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  callback = (key) => {
    console.log(key);
}
  render() {
      //formAlerSize和getFormData都是必传值
      let formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
      let getFormData = [
          {
              type : 'input',              //必填 输入框类型
              showName : '姓名',           //必填  label标签名
              name : 'userName',          //必填  传递的key (不能一样)
              initialValue : '默认值',    //选填   默认value
              required: true,             //选填   是否一定要填写
              disable: false               //选填   是否可编辑
          }, {
              type : 'dataTimePicker',
              showName : '选择入职的日期',
              name : 'dataPicker',
              //initialValue : '2015-01-05 12:55:26', //除标准格式外还可以是2015-1-5或者2015/1/5  {输出为标准格式'YYYY-MM-DD'}
              initialValue : '',
          }, {
              type : 'dataPicker',
              showName : '选择入职的日期2',
              name : 'dataPicker2222',
            //   initialValue : '2018-11-25',
              initialValue : '',
              required: true,
          }, {
               type : 'email',
               showName : '电子邮件',
               name : 'emailrName',
               initialValue : '',
               required: true,
               disable: false
           }, {
                type : 'password',
                showName : '密码',
                name : 'pwd',
                initialValue : '',
                required: true,
          }, {
              type : 'hiddenInput',
              name : 'id',
              initialValue : '001',
          }, {
              type : 'select',
              showName : '性别',
              name : 'sex',
              optionList:[              //必填  下拉框的信息
                  {
                      optionKey:'male',
                      optionShow:'男'
                  },{
                      optionKey:'famale',
                      optionShow:'女'
                  }
              ],
              initialValue : 'male',
              required: true
          }, {
               type : 'uploadFile',
               showName : '上传',
               name : 'upload',
               uploadUrl: '//jsonplaceholder.typicode.com/posts/',  //必须
               required: true
           }, {
                type : 'treeSelect',
                showName : '树选择',
                name : 'treeSlect',
                required: true,
                treeData : [                    //必须
                    {
                        label: 'Node1',        //节点显示内容
                        value: 'node1Value',          //节点返回的value
                        key: '0-0',
                        children: [
                            {
                                label: 'Child Node1',
                                value: 'node1childevalue',
                                key: '0-0-1'
                            }, {
                                label: 'Child Node2',
                                value: 'node1childe2value',
                                key: '0-0-2'
                            }
                        ]
                    }, {
                        label: 'Node2',
                        value: 'node2value',
                        key: '0-1'
                    }
                ]
            }, {
              type : 'radio',
              showName : '单选按钮',
              name : 'radioKey',
              initialValue : 'radioValue1',
              radioList:[                   //必填  单选按钮的选择项
                  {
                      radioKey:'radioValue1',
                      radioShow:'标签1'
                  },{
                      radioKey:'radioValue2',
                      radioShow:'标签2'
                  },{
                      radioKey:'radioValue3',
                      radioShow:'标签3'
                  },{
                      radioKey:'radioValue4',
                      radioShow:'标签4'
                  },{
                      radioKey:'radioValue5',
                      radioShow:'标签5'
                  },{
                      radioKey:'radioValue6',
                      radioShow:'标签6'
                  }
              ],
              required: true
          },{
              type : 'number',     //必填 数字选择输入框
              showName : '等级',
              name : 'rank',
              initialValue : '3',       //选填
              required:true
          },{
              type : 'textarea',
              showName : '备注',
              name : 'remark',
              initialValue : '这是一串默认备注'
          }
      ];

      /*------------------第二个表单的内容------------------------- */
       let getFormData2 = [
          {
              type : 'input',              //必填 输入框类型
              showName : '姓名',           //必填  label标签名
              name : 'userName',          //必填  传递的key (不能一样)
              initialValue : '默认值',    //选填   默认value
              required: true,             //选填   是否一定要填写
              disable: false               //选填   是否可编辑
          },
        ]

    return (
      <div style={{height:'100%'}}>
        <Button type="primary" onClick={this.showModal}>
          Open modal dialog
        </Button>

        <Modal
          style={{top:'40px'}}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={formAlerSize=='large'?'850px':'400px'}
          footer=''
        >
            <Tabs defaultActiveKey="1" onChange={this.callback}>
                <TabPane tab="Tab 1" key="1">
                    <WrappedAdvancedSearchForm
                        formAlerSize={formAlerSize}
                        formUrl="/formAction1"
                        getFormData={getFormData}
                        closeBox={this.handleCancel}
                        checkBox={this.handleOk}
                    />
                </TabPane>
                <TabPane tab="Tab 2" key="2">
                    <WrappedAdvancedSearchForm
                        formAlerSize={formAlerSize}
                        formUrl="/formAction2"
                        getFormData={getFormData2}
                        closeBox={this.handleCancel}
                        checkBox={this.handleOk}
                    /> 
                </TabPane>
            </Tabs>
            
        </Modal>
      </div>
    );
  }
}
